<template>
  <div class="biginfo">
    <dl class="info" v-if="userinfo">
      <dd>
        <div><span>{{ $t("language.info.id") }}</span><strong></strong></div>
        <div>
          <i>{{ userinfo.gameID }}</i>
          <i> <el-button class="copy" @click="copyToClipboard(userinfo.gameID)">{{
      $t("language.info.copy")
    }}</el-button></i>
        </div>
      </dd>
      <dd>
        <div><span>{{ $t("language.My.nickname") }}</span><strong></strong></div>
        <div><i>{{ userinfo.nickName }}</i><i> </i></div>
      </dd>
      <dd>
        <div>
          <span>{{ $t("language.info.icon1") }}</span>
          <strong v-if="!userinfo.isModifyAccounts" @click="editdialog('Account')">
            <el-icon size="22">
              <ArrowRight />
            </el-icon>
          </strong>
        </div>
        <div><i>{{ userinfo.accounts }}</i><i> </i></div>
      </dd>
      <dd>
        <div><span>{{ $t("language.info.icon2") }}</span><strong> </strong></div>
        <div><i>{{ userinfo.mobile }}</i><i> </i></div>
      </dd>
      <dd>
        <div @click="editdialog('code')"><span>{{ $t("language.info.icon4") }}</span><strong> <el-icon size="22">
              <ArrowRight />
            </el-icon></strong></div>
        <div><i></i><i> </i></div>
      </dd>
      <dd>
        <div @click="editdialog('email')"><span>{{ $t("language.info.icon3") }}</span><strong> <el-icon size="22">
              <ArrowRight />
            </el-icon></strong></div>
        <div><i></i><i> </i></div>
      </dd>


      <dd>
        <div>
          <span>{{ $t("language.info.icon6") }}</span>
          <strong>
            <!-- <el-icon size="22">
              <ArrowRight />
            </el-icon> -->
          </strong>
        </div>
        <div><i>{{ userinfo.spreaderCode }}</i><i><el-button @click="copyToClipboard(userinfo.spreaderCode)"
              class="copy">{{
      $t("language.info.copy")
    }}</el-button> </i></div>
      </dd>
      <dd>
        <div @click="editdialog('password')"><span>{{ $t("language.info.icon5") }}</span>
          <strong>
            <el-icon size="22">
              <ArrowRight />
            </el-icon>
          </strong>
        </div>
        <div><i>******</i><i> </i></div>
      </dd>

    </dl>
    <div class="dialog">
      <el-dialog width="500px" v-model="initVisible2" :show-close="false">
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.My.dialogtitle") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <template v-if="type1 == 'Account'">
            <el-form ref="accountForm" :model="ChangeAccount" label-width="auto" class="demo-ruleForm"
              label-position="top">
              <el-form-item :label="$t('language.My.AcountLabel')" prop="newAccounts">
                <el-input :placeholder="$t('language.My.placehold1')" v-model="ChangeAccount.newAccounts" />
              </el-form-item>
            </el-form>
            <p class="text">{{ $t("language.My.dialogtext") }}</p>
            <el-button :loading="loading" :disabled="loading" class="confirm" @click="AccountChange">{{
      $t("language.My.btn2") }}</el-button>
          </template>

          <template v-if="type1 == 'email'">
            <el-form ref="bangEmailform" :model="bangEmail" label-width="0px" label-position="left" status-icon
              style="width: 100%">
              <el-form-item label="" prop="email" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
                <div class="message">
                  <el-icon size="20">
                    <Message />
                  </el-icon>
                  <el-input v-model="bangEmail.email" :placeholder="$t('language.My.placehold2')" />
                </div>
              </el-form-item>
            </el-form>

            <el-button :loading="loading" :disabled="loading" class="confirm" @click="BandEmailSubmit">{{
      $t("language.My.btn1") }}</el-button>
          </template>
          <template v-if="type1 == 'code'">
            <h3>{{ $t("language.initdialog.init3title") }}</h3>
            <el-form ref="bandForm" :model="bandIDform" label-width="auto" class="demo-ruleForm" label-position="top"
              status-icon>
              <el-form-item prop="inviteCode" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: $t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
                <el-input clearable :placeholder="$t('language.My.placehold3')" v-model="bandIDform.inviteCode" />
              </el-form-item>
            </el-form>

            <p class="note">{{ $t("language.My.dialogtext2") }}</p>
            <el-button class="confirm" @click="bandsubmit">{{
      $t("language.My.btn2")
    }}</el-button>
          </template>
          <template v-if="type1 == 'password'">
            <el-form :model="ChangePassword" ref="passwordForm" label-width="0px" class="demo-dynamic">
              <el-form-item prop="oldPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.oldPassword"
                    :placeholder="$t('language.My.placehold4')" />
                </div>
              </el-form-item>
              <el-form-item prop="newPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.newPassword"
                    :placeholder="$t('language.My.placehold5')" />
                </div>
              </el-form-item>
              <el-form-item prop="confirmPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.confirmPassword"
                    :placeholder="$t('language.My.placehold6')" />
                </div>
              </el-form-item>
            </el-form>
            <el-button :loading="loading" :disabled="loading" class="confirm" @click="passwordChange">{{
      $t("language.My.btn2") }}</el-button>
          </template>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ArrowRight, CloseBold, Lock, Message } from '@element-plus/icons-vue'
import { reactive, computed,shallowRef } from "vue"
// import { copyToClipboard } from "../../utils/common";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
//获取用户信息
let store = useStore()
let userinfo = computed(() => store.userinfo)
//修改账户
let accountForm = ref<null | any>(null);
let ChangeAccount = reactive({
  id: userinfo.value.gameID,
  newAccounts: userinfo.value.accounts,
});
let loading = shallowRef<boolean>(false)
let initVisible2 = shallowRef<boolean>(false)
let AccountChange = () => {
  ChangeAccount.id = userinfo.value.gameID
  accountForm.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(
        `/UserCenter/v1.0/User/Accounts`,
        ChangeAccount
      )
        .then(({ data }: { data: any }) => {
          console.log(data, 'navigateTo("/");');

          switch (data.value.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.changetips"),
                duration: 1000,
                onClose: () => {
                  if (data.value.data) {
                    store.$patch({ userinfo: data.value.data })
                  }
                  initVisible2.value = false;
                  accountForm.value.resetFields();
                },
              });
              break;
            // case 500:
            // ElMessage({
            //   type: "success",
            //   message: t("language.commontips.changetips"),
            //   duration: 1000,
            //   onClose: () => {
            //     // info.accounts = ChangeAccount.newAccounts;
            //     // console.log(JSON.stringify(data.data), '0000');
            //     if (data.value.data) {
            //       // localStorage.setItem("info", JSON.stringify(data.data));
            //       store.$patch({userinfo:data.value.data})
            //     }
            //     initVisible2.value = false;
            //     accountForm.value.resetFields();
            //   },
            // });
            // break;
          }



        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};

//绑定邮箱
let bangEmailform = ref<null | any>(null);
let bangEmail = reactive({
  id: userinfo.value.gameID,
  email: "",
});
let BandEmailSubmit = () => {
  bangEmailform.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(`/UserCenter/v1.0/User/BindEmail`, bangEmail)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.bangtips"),
            duration: 1000,
            onClose: () => {
              bangEmailform.value.resetFields();
              initVisible2.value = false;
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
//绑定上级
let bandForm = ref<any | null>(null);
let bandIDform = reactive({
  id: userinfo.value.gameID,
  inviteCode: ""
});
let bandsubmit = () => {
  bandForm.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(
        `/UserCenter/v1.0/User/BindInviteCode`,
        bandIDform
      )
        .then(({ data }: { data: any }) => {
          switch (data.value.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.bangtips"),
                duration: 1000,
                onClose: () => {
                  bandForm.value.resetFields();
                  // info.spreaderCode = bandIDform.id;
                  initVisible2.value = false;
                },
              });
              break;
            case 5008:
              ElMessage({
                type: "error",
                message: t("language.commontips.bangnoexist"),
                duration: 1000,
                onClose: () => {
                  // bandForm.value.resetFields();
                  // info.spreaderCode = bandIDform.id;
                  // initVisible2.value = false;
                },
              });
              break;
          }

        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
// 修改密码
let passwordForm = ref<null | any>(null);
let ChangePassword = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
let passwordChange = () => {
  passwordForm.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      let passwordlist: any = {};
      for (let key in JSON.parse(JSON.stringify(ChangePassword))) {
        passwordlist[key] = encrypt(
          JSON.parse(JSON.stringify(ChangePassword))[key]
        )
          .toString()
          .substring(0, 32);
      }
      passwordlist['id'] = userinfo.value.gameID
      useHttpPOST(`/UserCenter/v1.0/User/Password`, passwordlist)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.changetips"),
            duration: 1000,
            onClose: () => {
              initVisible2.value = false;
              passwordForm.value.resetFields();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};

let type1 = ref("Account");
let editdialog = (types: string) => {
  console.log(90909);

  type1.value = types;
  // if (type1.value == 'type2' && info.isModifyAccounts) return
  initVisible2.value = true;
};
</script>
<style lang="scss">
.dialog {
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
      cursor: pointer;
      margin-right: -7px;
    }
  }

  .el-form-item__label {
    color: #b9bdc9;
  }

  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none;
    border: 1px solid #4a4c53;
    height: 40px !important;

    border-radius: 10px;
  }

  .el-input__wrapper.is-focus {
    border-color: rgb(0, 144, 109) !important;
  }

  .el-input__inner {
    color: #fff !important;
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    padding-top: 30px;

    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      padding: 0 14px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 30px auto 20px;
    }

    .text {
      font-size: 14px;
      color: #b5bac8;
      margin: 14px 0;
    }

    .message {
      width: 100%;
      @include flex(row, flex-start, center);

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password {
      @include flex(row, flex-start, center);
      width: 100%;

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password+.password {
      margin-top: 20px;
    }

    h3 {
      font-size: 22px;
      color: #b9bdc9;
      margin-bottom: 30px;
    }

    .note {
      font-size: 14px;
      color: #748494;
      line-height: 27px;
      margin-top: 40px;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style scoped lang="scss">
.biginfo {
  width: 100%;
  height: 100%;

  .info {
    width: 100%;
    height: 100%;
    padding: 40px;
    @include flex(row, space-between, flex-start);
    flex-wrap: wrap;

    .el-icon {
      cursor: pointer;
    }

    dd {
      width: 48%;
      padding: 30px 40px;
      background: #1c1f21;
      border-radius: 20px;
      @include flex(column, flex-start, center);
      height: 140px;

      margin-bottom: 50px;

      div {
        width: 100%;
        height: 40px;
        @include flex(row, space-between, flex-start);


        span {

          display: block;
          color: #fff;
          font-size: 16px;
        }


        i {
          width: 50%;
          font-style: normal;
          color: #656565;
          display: block;
          height: 40px;
          line-height: 40px;
        
        }
        i:nth-child(2){
          @include flex(row,flex-end,center);
        }


        .copy {
          max-width: 156px;
          width: 100%;
          height: 40px;
          border-radius: 8px;
          background: #0a906c;
          border: 1px solid #0a906c;
          color: #fff
        }


        @include flex(row, space-between, center);
      }
    }


  }
}
</style>